<template>
	<navigator :url="`/pages/club-detail/club-detail?club_id=${club.id}`">
		<uni-card :title="club.name" :sub-title="club.leaderName" :extra="joinedStatusValue" :thumbnail="club.club_avatar" @click="onClick">
			<text class="uni-body">{{ club.description }}</text>
		</uni-card>
	</navigator>
</template>
 
<script setup>
import { storeToRefs } from 'pinia'	
import { computed, ref, onMounted } from 'vue'
	
import useLoginStore from '@/store/login.js'	
import useClubStore from '@/store/club.js'

const loginStore = useLoginStore()
const clubStore = useClubStore()

const { userInfo } = storeToRefs(loginStore)
const { clubMemberInfo } = storeToRefs(clubStore)
const { club } = defineProps({
	club:{
		type: Object
	}
})

onMounted(() => {
	clubStore.getClubMemberStatusAction(club.id)
})


const joinedStatus = computed(() => {
	if(club.leader_id === userInfo.value.user_id ) return 0
	console.log(clubMemberInfo.value);
	if(clubMemberInfo.value) {
		if(clubMemberInfo.value.status === 'pending') {
			return 1
		}else if(clubMemberInfo.value.status === 'active') {
			return 0
		}else {
			return 2
		}
	}else {
		return -1
	}
})

const joinedStatusValue = computed(() => {
	switch(joinedStatus.value) {
		case -1:
			return '未加入'
		case 0:
			return '已加入'
		case 1:
			return '审核中...'
		case 2:
			return '已被拒绝'
	}
})


</script>

<style lang="less">

</style>